<template>
	<div :style="getPlaceholderDomStyle" v-if="getIsShowPlaceholderDom"></div>
	<div :style="getWrapStyle" :class="getClass">
		<LayoutHeader v-if="getShowInsetHeaderRef" />
		<MultipleTabs v-if="getShowTabs" />
	</div>
</template>
<script lang="ts">
import { defineComponent, unref, computed, CSSProperties } from 'vue';

import LayoutHeader from './index.vue';
import MultipleTabs from '../tabs/index.vue';

import { useHeaderSetting } from '@/hooks/setting/useHeaderSetting';
import { useMenuSetting } from '@/hooks/setting/useMenuSetting';
import { useMultipleTabSetting } from '@/hooks/setting/useMultipleTabSetting';
import { useDesign } from '@/hooks/web/useDesign';
import { useLayoutHeight } from '../content/useContentViewHeight';
import { useFullContent } from '@/hooks/web/useFullContent';

const HEADER_HEIGHT = 48;

const TABS_HEIGHT = 32;
export default defineComponent({
	name: 'LayoutMultipleHeader',
	components: { LayoutHeader, MultipleTabs },
	setup() {
		const { setHeaderHeight } = useLayoutHeight();
		const { prefixCls } = useDesign('layout-multiple-header');

		const { getCalcContentWidth } = useMenuSetting();
		const { getFixed, getShowHeader, getHeaderTheme, getShowFullHeaderRef, getShowInsetHeaderRef } =
			useHeaderSetting();

		const { getFullContent } = useFullContent();

		const { getShowMultipleTab } = useMultipleTabSetting();

		const getShowTabs = computed(() => {
			return unref(getShowMultipleTab) && !unref(getFullContent);
		});

		const getIsShowPlaceholderDom = computed(() => {
			return unref(getFixed) || unref(getShowFullHeaderRef);
		});

		const getWrapStyle = computed((): CSSProperties => {
			const style: CSSProperties = {};
			if (unref(getFixed)) {
				style.width = unref(getCalcContentWidth);
			}
			if (unref(getShowFullHeaderRef)) {
				style.top = `${HEADER_HEIGHT}px`;
			}
			return style;
		});

		const getIsFixed = computed(() => {
			return unref(getFixed) || unref(getShowFullHeaderRef);
		});

		const getPlaceholderDomStyle = computed((): CSSProperties => {
			let height = 0;
			if (unref(getShowFullHeaderRef) && unref(getShowHeader)) {
				height += HEADER_HEIGHT;
			}
			if (unref(getShowMultipleTab)) {
				height += TABS_HEIGHT;
			}
			setHeaderHeight(height);
			return {
				height: `${height}px`,
			};
		});

		const getClass = computed(() => {
			return [
				prefixCls,
				`${prefixCls}--${unref(getHeaderTheme)}`,
				{ [`${prefixCls}--fixed`]: unref(getIsFixed) },
			];
		});

		return {
			getClass,
			getPlaceholderDomStyle,
			getWrapStyle,
			getIsShowPlaceholderDom,
			getShowTabs,
			getShowMultipleTab,
			getShowInsetHeaderRef,
		};
	},
});
</script>
<style lang="less" scoped>
@prefix-cls: ~'@{namespace}-layout-multiple-header';

.@{prefix-cls} {
	transition: width 0.2s;
	flex: 0 0 auto;

	&--fixed {
		position: fixed;
		top: 0;
		z-index: @multiple-tab-fixed-z-index;
		width: 100%;
	}
}
</style>
